<template>
    <div class="home-box">
        <div v-for="type in types" :key="type.typeId">
            <div class="list-name">
                <span>{{type.typeName}}</span>
                <span class="list-more" @click="$emit('update:page','Film')">更多 > </span>
            </div>
            <!-- <div class="list-content">
                <film-item v-for="film in type.list" :key="film.filmId" :film="film"></film-item>
            </div> -->
            <film-list class="list-content" :list="type.list"></film-list>
        </div>
    </div>
</template>
<script>
    const Home = Vue.extend({
        template: document.currentScript.ownerDocument.querySelector("template"),
        data(){
            return{
                types: []
            }
        },
        methods: {
            filmSort() {
                $.ajax({
                    url: "http://localhost/film-project/filmApi/loadTyps.php",
                    dataType: "json",
                    success: ({ result }) => {
                        // console.log(result);
                        this.types = result;
                        for (let i in this.types) {
                            this.filmById(this.types[i].typeId, i);
                        }
                    }
                })
            },
            filmById(typeId, i) {
                $.ajax({
                    url: "http://localhost/film-project/filmApi/loadFilms.php",
                    dataType: "json",
                    data: {
                        typeId
                    },
                    success: ({ result }) => {
                        // console.log("result");
                        // this.types[i].list=result;
                        this.$set(this.types[i], "list", result);
                    }
                })
            }
        },
        
        mounted() {
            this.filmSort();
            // this.filmById();
            console.log(this);
        }
    })
</script>